<template>
    <el-row class="chart">
        <ve-line :data="chartData" :settings="chartSettings" :grid="grid"></ve-line>
    </el-row>
</template>

<script>
import VeLine from "v-charts/lib/line.common";

const lineChartData = {
    newVisitis: {
        columns: ["日期", "访问用户", "下单用户", "下单率"],
        rows: [
            { 日期: "1/1", 访问用户: 1393, 下单用户: 1093, 下单率: 10.32 },
            { 日期: "1/2", 访问用户: 3530, 下单用户: 3230, 下单率: 20.26 },
            { 日期: "1/3", 访问用户: 2923, 下单用户: 2623, 下单率: 30.76 },
            { 日期: "1/4", 访问用户: 1723, 下单用户: 1423, 下单率: 1110.49 },
            { 日期: "1/5", 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
            { 日期: "1/6", 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 },
            { 日期: "1/7", 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
            { 日期: "1/8", 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
            { 日期: "1/9", 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
            { 日期: "1/10", 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
            { 日期: "1/11", 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
            { 日期: "1/12", 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
        ]
    },
    messages: {
        columns: ["日期", "访问用户", "下单用户", "下单率"],
        rows: [
            { 日期: "1/1", 访问用户: 23393, 下单用户: 1093, 下单率: 0.32 },
            { 日期: "1/2", 访问用户: 13530, 下单用户: 3230, 下单率: 0.26 },
            { 日期: "1/3", 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
            { 日期: "1/4", 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
            { 日期: "1/5", 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
            { 日期: "1/6", 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 },
            { 日期: "1/7", 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
            { 日期: "1/8", 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
            { 日期: "1/9", 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
            { 日期: "1/10", 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
            { 日期: "1/11", 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
            { 日期: "1/12", 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
        ]
    },
    purchases: {
        columns: ["日期", "访问用户", "下单用户", "下单率"],
        rows: [
            { 日期: "1/1", 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
            { 日期: "1/2", 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
            { 日期: "1/3", 访问用户: 3923, 下单用户: 2623, 下单率: 0.76 },
            { 日期: "1/4", 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
            { 日期: "1/5", 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
            { 日期: "1/6", 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 },
            { 日期: "1/7", 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
            { 日期: "1/8", 访问用户: 3730, 下单用户: 3230, 下单率: 0.26 },
            { 日期: "1/9", 访问用户: 4923, 下单用户: 2623, 下单率: 0.76 },
            { 日期: "1/10", 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
            { 日期: "1/11", 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
            { 日期: "1/12", 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
        ]
    },
    shoppings: {
        columns: ["日期", "访问用户", "下单用户", "下单率"],
        rows: [
            { 日期: "1/1", 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
            { 日期: "1/2", 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
            { 日期: "1/3", 访问用户: 2223, 下单用户: 2623, 下单率: 0.76 },
            { 日期: "1/4", 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
            { 日期: "1/5", 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
            { 日期: "1/6", 访问用户: 23593, 下单用户: 4293, 下单率: 0.78 },
            { 日期: "1/7", 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
            { 日期: "1/8", 访问用户: 13530, 下单用户: 3230, 下单率: 0.26 },
            { 日期: "1/9", 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
            { 日期: "1/10", 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
            { 日期: "1/11", 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
            { 日期: "1/12", 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
        ]
    }
};
export default {
    name: "LineChart",
    components: {
        [VeLine.name]: VeLine
    },
    props: {
        selectChartData: {
            type: String,
            default: "newVisitis"
        }
    },
    data() {
        return {
            grid: {},
            chartSettings: {},
            chartData: {
                columns: lineChartData[this.selectChartData].columns,
                rows: lineChartData[this.selectChartData].rows
            }
        };
    },
    watch: {
        selectChartData(val) {
            this.chartData.columns = lineChartData[val].columns;
            this.chartData.rows = lineChartData[val].rows;
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.chart {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
}
</style>